<template>
    <div class="todo-container">
        <div class="todo-wrap">
            <Header :todos="todos" :addTodo="addTodo"></Header>
            <Main :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo">
            </Main>
            <Footer :todos="todos" :changeCheckAll="changeCheckAll" :deleteSel="deleteSel"></Footer>
        </div>
    </div>
</template>

<script setup lang="ts">
export interface TodoMode {
    id: number,
    content: string,
    isSel: boolean
}
export type TodosModel = TodoMode[]
import Footer from '@/components/Footer/index.vue'
import Main from '@/components/Main/index.vue'
import Header from '@/components/Header/index.vue'
import { ref, watch } from 'vue'
const todos = ref<TodosModel>(JSON.parse(localStorage.getItem('TODOS') as string) || [
    { id: 1001, content: '抽烟', isSel: true },
    { id: 1002, content: '喝酒', isSel: false },
    { id: 1003, content: '烫头', isSel: true },
])


// 数据持久化
watch(todos, (nval, oval) => {
    localStorage.setItem('TODOS', JSON.stringify(nval))
}, { deep: true })

const addTodo = (todo: TodoMode) => {
    todos.value.push(todo)
}
const checkTodo = (index: number) => {
    todos.value[index].isSel = !todos.value[index].isSel;
}
const deleteTodo = (index: number) => {
    todos.value.splice(index, 1)
}


const changeCheckAll = (bool: boolean) => {
    todos.value.forEach(item => {
        item.isSel = bool;
    })
}

const deleteSel = () => {
    todos.value = todos.value.filter(item => !item.isSel)
}

</script>

<style scoped>
/*app*/
.todo-container {
    width: 600px;
    margin: 0 auto;
}

.todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>